<template>
  <view class="container">
    
    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentType === null }"
        @click="filterByType(null)"
      >
        全部
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentType === 0 }"
        @click="filterByType(0)"
      >
        支出
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentType === 1 }"
        @click="filterByType(1)"
      >
        收入
      </view>
    </view>
    
    <!-- 列表 -->
    <view class="list">
      <view v-if="list.length === 0" class="empty-tip">暂无数据</view>
      
      <view 
        v-for="item in list" 
        :key="item.id" 
        class="record-card"
      >
        <view class="card-left">
          <view class="category">{{ item.category }}</view>
          <view class="remark text-gray">{{ item.remark || '无备注' }}</view>
          <view class="date text-gray">{{ formatDate(item.recordDate) }}</view>
        </view>
        
        <view class="card-right">
          <view class="amount" :class="item.type === 0 ? 'text-danger' : 'text-primary'">
            {{ item.type === 0 ? '-' : '+' }}{{ item.amount }}
          </view>
          <view class="actions">
            <text class="action-btn" @click.stop="deleteRecord(item.id)">删除</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 悬浮按钮 -->
    <view class="fab-btn" @click="goToAdd">
      <text class="fab-icon">+</text>
    </view>
    
  </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
  data() {
    return {
      list: [],
      currentType: null
    };
  },
  
  onLoad() {
    this.loadList();
  },
  
  onPullDownRefresh() {
    this.loadList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  
  onShow() {
    // 从添加页返回时刷新列表
    this.loadList();
  },
  
  methods: {
    async loadList() {
      try {
        uni.showLoading({ title: '加载中...' });
        const params = {};
        if (this.currentType !== null) {
          params.type = this.currentType;
        }
        const res = await api.getList(params);
        this.list = res.data || [];
        uni.hideLoading();
      } catch (error) {
        console.error('加载列表失败：', error);
        uni.hideLoading();
      }
    },
    
    filterByType(type) {
      this.currentType = type;
      this.loadList();
    },
    
    goToAdd() {
      uni.navigateTo({
        url: '/pages/add/add'
      });
    },
    
    deleteRecord(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条记录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await api.deleteRecord(id);
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              });
              this.loadList();
            } catch (error) {
              console.error('删除失败：', error);
            }
          }
        }
      });
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}月${day}日`;
    }
  }
};
</script>

<style scoped>
.container {
  padding-bottom: 100rpx;
}

.filter-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  color: #666;
  border-radius: 8rpx;
}

.tab-item.active {
  background-color: #1aad19;
  color: #fff;
}

.list {
  padding: 0 20rpx;
}

.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
}

.record-card {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.card-left {
  flex: 1;
}

.category {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.remark {
  font-size: 26rpx;
  margin-bottom: 5rpx;
}

.date {
  font-size: 24rpx;
}

.card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.amount {
  font-size: 36rpx;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 10rpx;
}

.action-btn {
  font-size: 24rpx;
  color: #999;
  padding: 5rpx 10rpx;
}

.fab-btn {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #1aad19;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 15rpx rgba(26, 173, 25, 0.4);
}

.fab-icon {
  font-size: 60rpx;
  color: #fff;
  font-weight: 300;
}
</style>



